<template>
    <div class="monitoring-list">
        <!--<yz-table border  :width="width" :height="height" :columns="config.columns" :data="config.data" ref="table"></yz-table>-->
    </div>
</template>
<script>
    import _ from 'lodash'
//    import yzTable from '../../../components/yzTable/yzTable'
    //默认配置
    const defaults = {
        title:'',
        columns:[],
        data:[]
    };
    export default {
        name: 'table',
        props: {
            options: {
                type: Object,
            }
        },
        data: function () {
            return {
                colW:120,
                width:800,
                height:400
            };
        },
        computed: {
            config: function () {
                return _.defaultsDeep({}, this.options, defaults);
            },
            minWidth: function () {
                let colW = this.colW;
                return this.config.columns.reduce(function (pre,cur) {
                    return pre + (cur.width ||colW);
                },0);
            }
        },
        methods: {
            //暴露给parent组件用
            // 配置不变，重绘图表
            refresh: function () {
                this.$nextTick(function () {
                    let chart = this.$refs.chart;
                    let table = this.$refs.table;
                    if(chart){
                        let width = chart.clientWidth-20;
                        let height = chart.clientHeight-10;
                        if(width<this.minWidth){
                            width = this.minWidth;
                        }
                        this.width = width;
                        this.height = height;
                    }

                    if(table){
                        table.handleResize();
                        table.fixedHeader();
                    }
                });
            }
        },
        watch: {
            options: {
                handler () {
                    this.refresh();
                },
                deep: true
            }
        },
        mounted:function () {
            this.refresh();
        },
        components: {
//            yzTable
        }
    }
</script>
<style lang="scss">
    .monitoring-list{
        overflow-x: auto;
        overflow-y: hidden;
        font-family: MicrosoftYaHei;
        padding: 10px;
        width: 100%;
        height: 100%;

        .title{
            font-size: 14px;
            color: #666666;
            height: 30px;
        }

        .ivu-table {

            tr.ivu-table-row-hover{

                td{
                    background-color: #fff;
                }
            }

            tr td:last-child > div > div > span{
                margin-right: 10px;
            }
        }
    }
</style>

